<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/m.css" rel="stylesheet">
<script src="js/scrollReveal.js"></script>
<script src="js/jquery.min.js"></script>
<title>生活足迹</title>
<style type="text/css">
.addShare {
	width: 100px;
	padding: 8px;
	background-color: #4682B4;
	border-color: #357ebd;
	color: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
	text-align: center;
	vertical-align: middle;
	border: 1px solid transparent;
	font-weight: 900;
	font-size: 125%;
	cursor: pointer;
}

.addShare:HOVER {
	background-color: #428bca;
	color: #F0F8FF;
}

.newShare {
	width: 580px;
	height: 150px;
	margin-left: 8px;
	border: 2px solid #4682B4;
	padding: 20px;
	border-radius: 15px;
	display: none
}

.del {
	position: absolute;
	top: 0;
	width: 17px;
	right: 10px;
	padding-left: 10px;
	font-style: normal;
	font-size: 18px;
	background-color: rgba(0, 0, 0, 0.2);
	color: #fff;
	cursor: pointer;
	display: none;
	right: 0;
	padding-left: 10px;
	font-style: normal;
	font-size: 18px;
	background-color: rgba(0, 0, 0, 0.2);
	color: #fff;
}

ul {
	/*清除ul默认格式中的.*/
	list-style: none;
}
/*清除margin-top塌陷*/
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
/*清除浮动*/
.clearfix:after {
	clear: both;
}
/*兼容IE*/
.clearfix {
	zoom: 1;
}

.pic_list_con {
	width: 958px;
	margin-top: 20px;
	border: 1px solid #ddd;
	/*多出来的ul要剪掉*/
	overflow: hidden;
	border: 1px solid #ddd;
}

.pic_list_con h3 span {
	/*内联元素转为内联块元素，支持全部样式*/
	display: inline-block;
	height: 50px;
	border-bottom: 2px solid red;
	font: 18px/50px 'Microsoft YaHei UI';
	padding: 0 15px;
}

.pic_list_con ul {
	width: 950px;
	margin: 20px 0 13px 20px;
}

.pic_list_con ul li {
	float: left;
	margin: 0 29px 25px 0;
	overflow: auto;
	width: 200px;
	background-color: #fff;
	display: block;
}
</style>
</head>
<body>
	<header>
	<div class="logo">
		<c:if test="${empty sessionScope.reqUser }">
			<h3>${sessionScope.username }的个人博客</h3>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<h3>${sessionScope.reqUser }的个人博客</h3>
		</c:if>
	</div>
	<nav id="nav">
	<ul>
		<li><a id="index" href="index.jsp">网站首页</a></li>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a
				href="BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<li><a
				href="BlogServlet?task=queryOtherBlog&author=${sessionScope.reqUser }">个人博客</a></li>
		</c:if>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a href="user/about.jsp">个人资料</a></li>
		</c:if>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a
				href="ShareServlet?task=queryShareList&username=${sessionScope.username }">生活记录</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<li><a
				href="ShareServlet?task=queryShareList&username=${sessionScope.reqUser }">生活记录</a></li>
		</c:if>
		<li><a href="user/message.jsp">留言板</a></li>
	</ul>
	</nav> </header>
	<div class="mnav">
		<ul>
			<li><a id="index" href="index.jsp">网站首页</a></li>
			<c:if test="${empty sessionScope.reqUser }">
				<li><a
					href="BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
			</c:if>
			<li><a
				href="UserServlet?task=queryUserById&id=${sessionScope.userId }">个人资料</a></li>
			<li><a href="user/share.jsp">生活记录</a></li>
			<li><a href="user/message.jsp">留言板</a></li>
		</ul>
	</div>
	<article> <c:if test="${empty sessionScope.reqUser }">
		<button class="addShare">+新增</button>
	</c:if>
	<div class="newShare">
		<h2>
			新增生活记录
			<hr>
		</h2>
		<form action="ShareServlet?task=addShare" method="post"
			enctype="multipart/form-data" style="margin-top: 10px">
			<div style="float: left; height: 50px">
				<input name="title" type="text" placeholder="标题"
					style="height: 30px; width: 200px">
			</div>
			<div style="float: left; height: 50px; padding-left: 20px">
				选择图片：<input id="imgInput" name="img" type="file">
			</div>
			<div style="float: left; height: 50px; width: 320px">
				<textarea name="content"
					style="width: 400px; height: 30px; resize: none; padding: 5px"
					maxlength="50" placeholder="添加一些描述吧..."></textarea>
			</div>

			<div style="float: left; padding-left: 100px">
				<input type="submit" value="发表" onclick="return checkFile()"
					style="height: 40px; width: 80px; background: #4682B4; color: #fff; font-size: 16px; cursor: pointer;">
			</div>
		</form>
	</div>

	<div class="pic_list_con">
		<h3>
			<span>生活记录</span>
		</h3>
		<ul class="clearfix">
			<c:forEach items="${shareList }" var="share" begin="0" end="7">
				<li class="pic" style="position: relative;"><img
					style="width: 200px; height: 160px;" src="/images/${share.img }"
					alt="图片"> <c:if test="${empty sessionScope.reqUser }">
						<span class="del">x</span>
					</c:if><input class="shareId" style="display: none" name="id"
					value="${share.id }"> <input class="shareUsername"
					style="display: none" name="username" value="${share.username }">
					<div class="picinfo">
						<h3>${share.title }</h3>
						<span>${share.content }</span>
					</div></li>
			</c:forEach>
		</ul>
		<c:if test="${fn:length(shareList) > 8 }">
			<div id="loadmore"
				style="margin-left: 400px; margin-bottom: 10px; cursor: pointer;">加载更多</div>
		</c:if>
	</div>
	</article>

	<script>
		$("body").on("mouseenter", ".pic", function() {
			$(this).find(".del").show();
		});
		$("body").on("mouseleave", ".pic", function() {
			$(this).find(".del").hide();

		});
		$(document)
				.on(
						"click",
						".del",
						function() {
							if (confirm("确定删除吗?")) {
								var id = $(this).parent().find(".shareId")
										.val();
								var username = $(".shareUsername").val();
								$
										.ajax({
											type : "post",
											url : "ShareServlet",
											data : {
												"id" : id,
												"task" : "deleteShare",
											},
											success : function(message) {
												if (message == "true") {
													window.location.href = "ShareServlet?task=queryShareList&username="
															+ username
												}
											},
										})
							}
						})
	</script>
	<script type="text/javascript">
		$(".addShare").click(function() {
			$(".newShare").show();
			$(".addShare").hide();
		})
		$("#loadmore")
				.click(
						function() {
							var username = $(".shareUsername").val();
							$
									.ajax({
										type : "post",
										url : "ShareServlet",
										data : {
											"task" : "loadmore",
											"username" : username,
										},
										success : function(message) {
											var list = eval(message);
											var str = "<h3><span>生活记录</span></h3><ul class='clearfix'>";
											for (i = 0; i < list.length; i++) {
												str += "<li class='pic' style='position: relative;'>"
														+ "<img style='width: 200px; height: 160px;' src='/images/"+list[i].img+"' alt='图片'>"
														+ "<c:if test='${empty sessionScope.reqUser }'><span class='del'>x</span></c:if>"
														+ "<input class='shareId' style='display: none' name='id' value='"+list[i].id+"'>"
														+ "<input class='shareUsername' style='display: none' name='username' value='"+list[i].username+"'>"
														+ "<div class='picinfo'>"
														+ "<h3>"
														+ list[i].title
														+ "</h3>"
														+ "<span>"
														+ list[i].content
														+ "</span>"
														+ "</div></li>";
											}
											str += "</ul>";
											$(".pic_list_con").empty();
											$(".pic_list_con").append(str);
											$("#loadmore").hide();
										},
										error : function(error) {
											alert(error)
										}
									})
						})
	</script>
	<script type="text/javascript">
		$("#index").click(function() {
			window.location.href = "UserServlet?task=out"
		})
		function checkFile() {
			var fileInput = $('#imgInput').get(0).files[0];
			console.info(fileInput);
			if (fileInput) {
				return true;
			} else {
				alert("请选择上传文件！");
				return false;
			}
		}
	</script>
</body>
</html>